<template>
  <el-container class="bg_img1">
    <el-main class="bg_size1">
    <el-header class="ZC"> 反馈建议内容 </el-header>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        class="demo-ruleForm"
        label-position="left"
        label-width="120px"
      >

        <el-row>
          <el-col :span="8" :offset="8">
            <el-form-item label="反馈性质" prop="type">
                <el-checkbox-group v-model="ruleForm.type">
                    <el-checkbox label="数字资源" name="type"></el-checkbox>
                    <el-checkbox label="个性化服务" name="type"></el-checkbox>
                    <el-checkbox label="信息反馈" name="type"></el-checkbox>
                    <el-checkbox label="隐私安全" name="type"></el-checkbox>
                </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8" :offset="8">
            <el-form-item label="反馈类型" prop="resource">
                <el-radio-group v-model="ruleForm.resource">
                    <el-radio label="选座问题"></el-radio>
                    <el-radio label="登录问题"></el-radio>
                    <el-radio label="信息修改问题"></el-radio>
                </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        
        <el-row>
          <el-col :span="8" :offset="8">
            <el-form-item label="建议内容" prop="desc">
                <el-input 
                placeholder="请输入建议内容"
                type="textarea" 
                v-model="ruleForm.desc"
                clearable
                :autosize="{ minRows:  6}">
                </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="1" :offset="8">
            <el-form-item>
              <el-button
                type="primary"
                plain
                v-on:click="confirm()"
                >提交反馈意见</el-button
              >
            </el-form-item>
          </el-col>

          <!-- <el-col :span="1">
            <el-form-item>
              <el-button
                type="primary"
                plain
                v-on:click="del()"
                >删除反馈意见</el-button>
            </el-form-item>
          </el-col> -->

        </el-row>

      </el-form>
    </el-main>
  </el-container>
</template>

<script>
import axios from "axios";
import qs from "querystring";


export default {
  name: "",
  data() {
    return {
      ruleForm: {
        type: [],
        resource: '',
        desc: ''
      },
      rules: {
        type: [{
            type: 'array',
            required: true,
            message: '请至少选择一个活动性质',
            trigger: 'change'
        }],
        resource: [{
            required: true,
            message: '请选择活动资源',
            trigger: 'change'
        }],
        desc: [{
            required: true,
            message: '请填写活动形式',
            trigger: 'blur'
        }]
      }
    };
  },
  methods: {

    confirm() {
      let that = this;

      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          let neirong = that.ruleForm.desc;
          let uid = this.$store.state.accountInfo.id;

          // console.log(neirong,uid);

          axios.post(
            "http://localhost:8080/library/zengjiajianYi",
            qs.stringify({ uid, neirong }),
            {
              headers: {
                "Content-Type":
                  "application/x-www-form-urlencoded;charset=UTF-8",
              },
            }
          )
          .then(function (response) {
            if (response.data.code == 1) {
              window.alert("反馈成功！");
            } else {
              that.msg = "失败";
            }
          })
          .catch((error) => {
            console.log(error);
          });
        }
      });
    },

   
    // del() {
    //   let that = this;

    
    //       let id = 5;
    //       let uid = this.$store.state.accountInfo.id;

    //       // console.log(neirong,uid);

    //       axios.post(
    //         "http://localhost:8080/library/shanchujianYi",
    //         qs.stringify({ id, uid }),
    //         {
    //           headers: {
    //             "Content-Type":
    //               "application/x-www-form-urlencoded;charset=UTF-8",
    //           },
    //         }
    //       )
    //       .then(function (response) {
    //         if (response.data.code == 1) {
    //           window.alert("成功");
    //         } else {
    //           that.msg = "失败";
    //         }
    //       })
    //       .catch((error) => {
    //         console.log(error);
    //       });
        
      
    // },

  }
};
</script>

<style scoped>
.ZC {
  font-size: 30px;
  margin-left: 40%;
  color: rgb(150, 172, 192);
}
.msg {
  color: red;
  margin-bottom: 15px;
}
</style>